<template>
  <d2-container type="full" :betterScroll="false">
    <template slot="header">发送通知</template>
    <div style="height: 400px; margin: -16px;">
      <div style="margin: 20px;">
        <el-form label-width="80px" :model="formLabelAlign">
          <el-form-item label="通知类型" >
            <el-select v-model="formLabelAlign.type" filterable :clearable="true" >
              <el-option
                v-for="item in types"
                :key="item.type"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="执行sql">
              <el-select v-model="formLabelAlign.has_sql" filterable :clearable="true" placeholder="否">
              <el-option
                v-for="item in has_sql"
                :key="item.value"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知项目">
            <el-select v-model="formLabelAlign.project" @change="setReceiverList" clearable filterable :placeholder="`${$route.query.name?$route.query.name:'请选择'}`">
              <el-option
                v-for="item in this.projects"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="通知标题">
            <el-input v-model="formLabelAlign.title" placeholder="非必填项" style="width: 218px"></el-input>
          </el-form-item>
          <el-form-item label="通知对象">
            <el-select v-model="formLabelAlign.receivers" multiple @click.native="getUsers(8888)" filterable :clearable="true" placeholder="请选择">
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知内容">
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入通知内容"
              :clearable="true"
              show-word-limit
              maxlength="2000"
              autofocus="true"
              v-model="formLabelAlign.content"
              style="width: 70%">
            </el-input>
            </el-form-item>
           <el-form-item label="上传附件">
            <el-upload
              class=""
              drag
              action
              :multiple="true"
              :show-file-list="true"
              :http-request="uploadHttpRequest"
              :file-list="this.formLabelAlign.fileList"
              :on-change="handChange"
              :before-upload="beforeUpload">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
           </el-form-item>
          <el-form-item label="发送">
          <el-button type="success" @click="sendNotification()">发送</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </d2-container>
</template>

<script>
import Vue from 'vue'
import SplitPane from 'vue-splitpane'
import { GetUsers } from '@/views/ops/common/api'
import { GetList } from '@/views/ops/config/project/project_info/api'
import { SendNotification } from '@/views/ops/devops/notification/management/api'

Vue.component('SplitPane', SplitPane)
export default {
  mounted () {
    // 加载完成后显示提示
    this.showInfo()
    this.getProjectInfo()
  },
  data () {
    return {
      queryReslut: [],
      projects: {},
      receivers: [],
      users: '',
      has_sql: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      types: [
        {
          type: 'deploy',
          label: '上线通知'
        },
        {
          type: 'problem',
          label: '故障通知'
        }
      ],
      fileTypes: ['.xls', '.xlsx', '.pdf', '.doc', '.docx', '.txt', '.sql'],
      formLabelAlign: {
        type: '上线通知',
        title: '',
        has_sql: '否',
        fileList: []
      }
    }
  },
  methods: {
    // 显示提示
    showInfo () {
      this.$notify({
        title: '提示',
        message: '在横向或者纵向的分割线上拖拽调整分区大小'
      })
    },
    // 获取项目列表
    getProjectInfo () {
      GetList().then(res => {
        this.projects = res.data.data
      })
    },
    // 设置接收者
    setReceiverList (name) {
      for (let i = 0, len = this.projects.length; i < len; i++) {
        if (this.projects[i].name === name) {
          this.formLabelAlign.receivers = this.projects[i].project_member
        }
      }
      // this.projects.forEach(function (value, index){
      //   if (name === value.name) {
      //     console.log(8888)
      //     console.log(value.name)
      //     console.log(value.project_member)
      //     this.receivers = [47]
      //   }
      // })
    },
    getUsers (limit) {
      GetUsers(limit).then(res => {
        this.users = res
      })
    },
    async sendNotification () {
      const myTitle = this.formLabelAlign.title ? this.formLabelAlign.title : this.formLabelAlign.type
      const param = new FormData()
      param.append('receivers', this.formLabelAlign.receivers)
      param.append('title', myTitle)
      param.append('has_sql', this.formLabelAlign.has_sql)
      param.append('project', this.formLabelAlign.project)
      param.append('content', this.formLabelAlign.content)
      param.append('type', this.formLabelAlign.type)
      this.formLabelAlign.fileList.map(item => {
        param.append('files', item.raw)
      })
      const res = await SendNotification(param)

      this.$notify({
        title: '反馈信息',
        message: res,
        type: 'success',
        duration: 3000 // 关闭时间，默认为4500ms
      })
    },
    beforeUpload (file) {
      const fileType = file.name.substring(file.name.lastIndexOf('.'))
      if (!this.fileTypes.includes(fileType.toLowerCase())) {
        this.$message.error("文件必须为'xls', 'xlsx', 'pdf', 'doc', 'docx', 'txt'类型")
        this.formLabelAlign.fileList = []
        return true
      }
    },
    // 覆盖element的默认上传文件
    uploadHttpRequest (file) {
      this.tmp = file
    },
    /** 文件状态改变时调用 */
    handChange (file, fileList) {
      this.formLabelAlign.fileList = fileList

    }
  }
}
</script>
